<template>
  <!-- 判断对象是否为空 -->
	<div v-if="Object.keys(goods).length !== 0" class="base-info">
		<div class="info-title">{{goods.title}}</div>
		<div class="info-price">
			<span class="new-price">{{goods.newPrice}}</span>
			<span class="old-price">{{goods.oldPrice}}</span>
      <span v-if="goods.discount" class="discount">{{goods.discount}}</span>
		</div>
    <div class="info-other">
      <span>{{goods.columns[0]}}</span>
      <span>{{goods.columns[1]}}</span>
      <span>{{goods.services[goods.services.length-1].name}}</span>
    </div>
    <div class="info-services">
      <span class="info-services-item" v-for="index in goods.services.length-1" :key="index">
        <img :src="goods.services[index-1].icon">
        <span>{{goods.services[index-1].name}}</span>
      </span>
    </div>
	</div>
</template>

<script>
export default {

  name: 'DetailBaseInfo',

  data () {
    return {

    }
  },
  props:{
  	goods:{
  		type:Object,
  		default(){
  			return {}
  		}
  	}
  }
};
</script>

<style lang="css" scoped>
  .base-info{
    margin-top:14px;
    padding: 0 8px; 
    color: #999;
    border-bottom: 5px solid #f2f5f8;
  }
  .info-title{
    text-align: justify;
    color: #222;
  }
.info-price {
  margin-top: 10px;
}

.info-price .new-price {
  font-size: 24px;
  color: #ff5777;
}

.info-price .old-price {
  font-size: 13px;
  margin-left: 5px;
  text-decoration: line-through;
  /*删除线*/
}

.info-price .discount {
  font-size: 12px;
  position: relative;
  top: -4px;
  margin-left: 5px;
  padding: 3px 6px;
  color: #ffffff;
  border-radius: 8px;
  background-color: #ff5777;
}

.info-other {
  font-size: 13px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}

.info-services {
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.info-services-item img {
  position: relative;
  top: 2px;
  width: 15px;
  height: 15px;
}

.info-services-item span {
  font-size: 13px;
  margin-left: 5px;
  color: #333333;
}
</style>